<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>用户审核</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-table :data="allUserInfo" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户昵称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号码"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="identityId"
          label="identityId"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="用户密码"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sex" label="用户性别" width="80" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sex === 1 ? "男" : "女" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="用户介绍" width="370">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showIdentifyUserInfo(scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="showPassIdentifyDialogVisible(scope.row)"
              >通过审核</el-button
            >
            <el-dialog
              title="提示"
              :visible.sync="passIdentifyDialogVisible"
              width="30%"
            >
              <span>确定通过身份认证？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="passIdentifyDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="confirmPass">确 定</el-button>
              </span>
            </el-dialog>
            <el-button
              type="primary"
              size="mini"
              @click="showUnpassIdentifyDialogVisible(scope.row)"
              style="margin-left:10px"
              >不通过审核</el-button
            >
            <el-dialog
              title="提示"
              :visible.sync="unpassIdentifyDialogVisible"
              width="30%"
            >
              <span>确定不通过身份认证？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="unpassIdentifyDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="confirmUnPass"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="查看用户的审核资料信息"
      :visible.sync="identityUserInfoDialogVisible"
      width="50%"
      align="center"
    >
      <el-form :model="userInfoForm">
        <el-form-item label="用户学校" :label-width="formLabelWidth">
          <span>{{ userInfoForm.school }}</span>
        </el-form-item>
        <el-form-item label="用户专业" :label-width="formLabelWidth">
          <span>{{ userInfoForm.profession }}</span>
        </el-form-item>
        <el-form-item label="用户入学年份" :label-width="formLabelWidth">
          <span>{{ userInfoForm.entranceYear }}</span>
        </el-form-item>

        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <img style="width: 50%;" :src="userInfoForm.headPicUrl" alt="" />
        </el-form-item>
        <el-form-item
          label="用户学生证或校园卡照片"
          :label-width="formLabelWidth"
        >
          <img style="width: 50%;" :src="userInfoForm.stuidPicUrl" alt="" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  ReqGetIdentityByStatus,
  ReqCheckIdentity,
  ReqGetUserInfoById,
} from "../../request/index.js";
export default {
  data() {
    return {
      identityUserInfoDialogVisible: false,
      allUserInfo: [],
      userInfoForm: {},
      passIdentifyDialogVisible: false,
      unpassIdentifyDialogVisible: false,
      formLabelWidth: "240px",
      temRow: {},
    };
  },
  methods: {
    showIdentifyUserInfo(row) {
      this.identityUserInfoDialogVisible = true;
      this.userInfoForm = row;
      console.log(row);
    },
    showPassIdentifyDialogVisible(row) {
      this.passIdentifyDialogVisible = true;
      this.temRow = row;
    },
    showUnpassIdentifyDialogVisible(row) {
      this.unpassIdentifyDialogVisible = true;
      this.temRow = row;
    },
    confirmPass() {
      this.passIdentifyDialogVisible = false;
      ReqCheckIdentity({
        identifyId: this.temRow.identityId,
        status: 1,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "操作失败",
            type: "warning",
          });
        }
        this.getIdentityUser();
      });
    },
    confirmUnPass() {
      this.unpassIdentifyDialogVisible = false;
      ReqCheckIdentity({
        identifyId: this.temRow.identityId,
        status: 0,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "操作失败",
            type: "warning",
          });
        }
        this.getIdentityUser();
      });
    },
    getIdentityUser() {
      ReqGetIdentityByStatus({
        identityStatus: 2,
      }).then((res) => {
        this.allUserInfo = res.data;
      });
    },
  },
  created() {
    ReqGetIdentityByStatus({
      identityStatus: 2,
    }).then((res) => {
      console.log(res);
      this.allUserInfo = res.data;
    });
  },
};
</script>

<style scoped></style>
